<template>
  <view class="page">
    <!-- 轮播图区域 -->
    <view class="banner-section">
      <swiper class="banner-swiper" indicator-dots autoplay circular>
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <image class="banner-image" :src="item.image" mode="aspectFill" @tap="handleBannerClick(item)"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 热门用户列表 -->
    <view class="user-list-section">
      <view class="section-title">热门推荐</view>

      <!-- 用户列表 -->
      <view class="user-list">
        <view class="user-card" v-for="(user, index) in userList" :key="index" @tap="viewUserDetail(user)">
          <!-- 用户基本信息 -->
          <view class="user-info">
            <image class="user-avatar" :src="user.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
            <view class="user-basic-info">
              <view class="user-name-wrapper">
                <text class="user-name">{{user.nickname}}</text>
                <view class="user-gender" :class="user.gender === 1 ? 'male' : 'female'">
                  <text>{{user.gender === 1 ? '♂' : '♀'}}</text>
                  <text class="user-age">{{user.age}}岁</text>
                </view>
              </view>
              <view class="user-meta">
                <text>{{user.height}}cm</text>
                <text class="dot-divider">·</text>
                <text>{{user.city}}</text>
              </view>
            </view>
          </view>

          <!-- 用户介绍 -->
          <view class="user-intro" v-if="user.signature">
            <text class="intro-label">个人介绍：</text>
            <text class="intro-content">{{user.signature}}</text>
          </view>

          <!-- 择偶要求 -->
          <view class="user-preference" v-if="user.mate_preference">
            <text class="preference-label">择偶要求：</text>
            <text class="preference-content">{{user.mate_preference}}</text>
          </view>

          <!-- 照片预览 -->
          <view class="user-photos" v-if="user.photos && user.photos.length > 0">
            <image
              v-for="(photo, photoIndex) in user.photos.slice(0, 3)"
              :key="photoIndex"
              :src="photo.url"
              mode="aspectFill"
              class="user-photo"
            ></image>
            <view class="photo-more" v-if="user.photos.length > 3">+{{user.photos.length - 3}}</view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMoreUsers">
        <text>加载更多...</text>
      </view>
      <view class="no-more" v-else>
        <text>没有更多了</text>
      </view>
    </view>
  </view>
</template>

<script>
import {
  loginApi,
  getBannersApi,
  getDiscoverUserApi
} from '@/api/index'

export default {
  data() {
    return {
      bannerList: [], // 轮播图数据
      userList: [], // 用户列表数据
      page: 1, // 当前页码
      pageSize: 10, // 每页数量
      hasMoreUsers: true, // 是否有更多用户
      isLoading: false // 是否正在加载
    }
  },
  onLoad() {
    this.init();
  },
  onReachBottom() {
    if (this.hasMoreUsers && !this.isLoading) {
      this.loadMoreUsers();
    }
  },
  methods: {
    // 初始化页面
    init() {
      // 获取轮播图数据
      this.getBanners();

      // 微信登录
      this.wxLogin();

      // 获取热门用户列表
      this.getHotUsers();
    },

    // 获取轮播图
    getBanners() {
      getBannersApi().then(res => {
        console.log('获取轮播图成功', res);
        if (res && res.data) {
          this.bannerList = res.data;
        }
      }).catch(err => {
        console.error('获取轮播图失败', err);
      });
    },

    // 微信登录
    wxLogin() {
      uni.login({
        success: loginRes => {
          if (loginRes.code) {
            loginApi({
              code: loginRes.code
            }).then(res => {
              // 存储token到本地缓存
              uni.setStorageSync('token', res.token);

              // 存储用户信息到本地缓存
              if (res.userInfo) {
                uni.setStorageSync('userInfo', res.userInfo);
              }

              console.log('登录成功');
            }).catch(err => {
              console.error('登录失败', err);
            });
          } else {
            console.error('获取微信code失败');
          }
        },
        fail: err => {
          console.error('微信登录失败', err);
        }
      });
    },

        // 获取热门用户
    getHotUsers() {
      if (this.isLoading) return;

      this.isLoading = true;

      getDiscoverUserApi({
        page: this.page,
        limit: this.pageSize
      }).then(res => {
        console.log('获取热门用户成功', res);
        if (res && res.items) {
          const newUsers = res.items || [];

          // 处理用户数据，计算年龄等
          newUsers.forEach(user => {
            // 如果有生日，计算年龄
            if (user.birthday) {
              const birthYear = new Date(user.birthday).getFullYear();
              const currentYear = new Date().getFullYear();
              user.age = currentYear - birthYear;
            } else {
              user.age = '未知';
            }
          });

          this.userList = [...this.userList, ...newUsers];

          // 判断是否有更多数据
          this.hasMoreUsers = newUsers.length === this.pageSize;

          // 页码加1
          if (newUsers.length > 0) {
            this.page++;
          }
        }
      }).catch(err => {
        console.error('获取热门用户失败', err);
      }).finally(() => {
        this.isLoading = false;
      });
    },

    // 加载更多用户
    loadMoreUsers() {
      this.getHotUsers();
    },

    // 点击轮播图
    handleBannerClick(banner) {
      if (banner.link_url) {
        uni.navigateTo({
          url: banner.link_url
        });
      }
    },

    // 查看用户详情
    viewUserDetail(user) {
      uni.navigateTo({
        url: `/pages/user/detail/index?id=${user.id}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
